<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增商品信息')"/>
    <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/xingkong/css/images.css}" rel="stylesheet">
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form>
    <div class="row">
        <div class="col-sm-10">
            <div class="form-group">
                <label class="col-sm-2 control-label">选择规格</label>
                <div class="col-xs-6">
                    <select id="specification" class="form-control select2-multiple" multiple>
                        <option th:each="spec : ${specs}" th:text="${spec.name}"
                                th:value="${spec.id}"></option>
                    </select>
                </div>
                <div>
                    <label class="col-sm-2 control-label">可多选</label>
                </div>
            </div>
        </div>
    </div>
    <div id="specVauleList">

    </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script type="text/javascript">
    $("#specification").on("select2:select",function (e) {

        selectSpec(e.params.data.id,e.params.data.text)
    });
    $("#specification").on("select2:unselect",function (e) {
        $("#specItem_"+e.params.data.id).remove();
    });

    function selectSpec(specId,specName) {
        $.simple.get(ctx+"product/item/getItemBySpecId/"+specId,function (data) {

            if( data && data.length>0 ){
                var specValues =  ' <div class="col-sm-10" id="specItem_'+specId+'">' +
                    '        <input type="button"  class="btn btn-primary" value="'+specName+'">'+
                    '<div class="row">';
                for(var i = 0 ; i < data.length; i++){
                    specValues += '           <div class="col-xs-2">' +
                        '               <input type="checkbox" value="'+data[i].id+'" /> ' +data[i].itemValue+
                        '           </div>';
                }
                specValues += ' </div></div>';
                $("#specVauleList").append(specValues);
            }else {
                $.modal.alertWarning( "规格 " + specName +"没有配置值，请配置相应的值");
            }
        })
    }


</script>
</body>
</html>